<template>
  <div class="d-flex justify-center align-center">
    <v-btn icon :color="linkStatus ? iconColor : null" @click="toggleStatus">
      <v-icon>{{ icon }}</v-icon>
    </v-btn>
    <v-btn color="orange" text @click="toggleStatus"
    >{{ linkStatus ? `取消${title}` : title }}
    </v-btn>
  </div>
</template>

<script>
export default {
  data() {
    return {
      linkStatus: false,
    }
  },
  props: {
    type: {
      type: String,
      required: true,
    },
    object: {
      type: String,
      required: true,
    },
    icon: {
      type: String,
      required: true,
    },
    name: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    iconColor: {
      type: String,
      required: true,
    },
  },
  methods: {
    async getStatus() {
      const res = await this.$axios.$get('/actions/status', {
        params: {
          type: this.type,
          object: this.object,
          name: this.name,
        },
      })
      this.linkStatus = res.data.status
    },
    async toggleStatus() {
      const res = await this.$axios
        .$post('/actions/toggle', {
          type: this.type,
          object: this.object,
          name: this.name,
        })
        .catch((err) => {
          this.$message.error(err.message)
          this.$router.push('/registry')
        })
      if (res) {
        this.linkStatus = res.data.status
      }
    },
  },

  created() {
    this.$store.state.auth.user && this.getStatus()
  },
}
</script>

<style scoped lang="scss">
.v-btn {
  font-size: 12px;
}

.v-icon {
  height: 12px;
  width: 12px;
}

.v-btn:not(.v-btn--round).v-size--default {
  padding: 0;
  min-width: 0px;
}
</style>
